<template>
<div class="profile-container">
    <van-cell-group v-if="user" class="profile-info">
        <van-cell center class="about" :border="false">
            <template #icon>
                <van-image class="avatar" round :src="currentUser.photo" />
            </template>
            <template #title>
                <span class="nick-name">{{currentUser.name}}</span>
            </template>
            <van-button class="edit-btn" type="default" size="small" round>编辑资料</van-button>

        </van-cell>
        <van-grid class="data-info" :border="false">
            <van-grid-item class="data-info-item" icon="photo-o" text="文字">
                <div class="count">{{currentUser.art_count}}</div>
                <div class="text">关注</div>
            </van-grid-item>
            <van-grid-item class="data-info-item" icon="photo-o" text="文字">
                <div class="count">{{currentUser.follow_count}}</div>
                <div class="text">关注</div>
            </van-grid-item>
            <van-grid-item class="data-info-item" icon="photo-o" text="文字">
                <div class="count">{{currentUser.fans_count}}</div>
                <div class="text">粉丝</div>
            </van-grid-item>
            <van-grid-item class="data-info-item" icon="photo-o" text="文字">
                <div class="count">{{currentUser.like_count}}</div>
                <div class="text">获赞</div>
            </van-grid-item>
        </van-grid>
    </van-cell-group>

    <van-grid v-else :border="false" :column-num="1" class="not-login-wrapper">
        <van-grid-item class="not-login" v-on:click="$router.push('/login?redirect=/profile')">
            <img slot="icon" class="login-img" src="~@/assets/mobile.png" />
            <div slot="text" class="login-text">登录 / 注册</div>
        </van-grid-item>
    </van-grid>

    <van-grid :border="false" :column-num="2" class="track">
        <van-grid-item class="track-item">
            <template #icon>
                <van-icon name="chat-o" color="#eb5253" />
            </template>
            <template #text>
                <span class="text">收藏</span>
            </template>
        </van-grid-item>
        <van-grid-item class="track-item">
            <template #icon>
                <van-icon name="flag-o" color="#ff9d1d" />
            </template>
            <template #text>
                <span class="text">历史</span>
            </template>
        </van-grid-item>
    </van-grid>

    <van-cell-group class="nav-wrapper">
        <van-cell title="消息通知" is-link url="/vant/mobile.html" />
        <van-cell title="在线客服" is-link to="index" />
    </van-cell-group>
    <van-cell-group class="logout-wrapper" v-if="user">
        <van-cell>
            <van-button type="default" class="logout-btn" block :border="false" v-on:click="onLogout">退出登录</van-button>
        </van-cell>
    </van-cell-group>
</div>
</template>

<script>
import {
    mapState
} from 'vuex'
import {
    getCurrentUser
} from '@/api/user'
export default {
    name: 'ProfileIndex',
    components: {},
    props: {},
    data() {
        return {
            currentUser: {}
        }
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {},
    created() {
        this.loadCurrentUser()
    },
    mounted() {},
    methods: {
        async loadCurrentUser() {
            const res = await getCurrentUser()
            this.currentUser = res.data
            console.log(this.currentUser)
        },
        onLogout() {
            this.$dialog.confirm({
                    title: '标题',
                    message: '弹窗内容',
                    theme: 'round-button'
                })
                .then(() => {
                    // on confirm
                    this.$store.commit('removeUser')
                })
                .catch(() => {
                    // on cancel
                })
        }
    }
}
</script>

<style lang="less" scoped>
.not-login-wrapper {
    height: 180px;
    background-image: url("~@/assets/banner.png");
    background-repeat: no-repeat;
    background-size: cover;

    /deep/ .not-login {
        .van-grid-item__content {
            background-color: unset;
        }

        .login-img {
            width: 66px;
            height: 66px;
        }

        .login-text {
            font-size: 14px;
            color: #fff;
        }
    }
}

.profile-info {
    background-image: url("~@/assets/banner.png");
    background-repeat: no-repeat;
    background-size: cover;

    .about {
        height: 115px;
        background-color: unset;
        padding-top: 38px;
        padding-bottom: 11px;

        .avatar {
            box-sizing: border-box;
            height: 66px;
            width: 66px;
            border: 1px solid #fff;
            margin-right: 12px;
        }

        .nick-name {
            font-size: 15px;
            color: #fff;
        }

        .edit-btn {
            height: 20px;
            font-size: 11px;
        }
    }

    .data-info {

        .data-info-item {
            height: 65px;

            .count {
                font-size: 18px;
            }

            .text {
                font-size: 12px;
            }
        }
    }

    /deep/ .van-grid-item__content {
        background-color: unset;
    }
}

.track {
    margin-bottom: 5px;

    .track-item {
        height: 70px;

        .van-icon {
            font-size: 22px;
        }

        .text {
            font-size: 14px;
            color: #333;
        }
    }

}

.nav-wrapper {
    margin-bottom: 5px;
}

.logout-btn {
    border: none;

    .van-button__text {
        color: #d86262
    }
}
</style>
